<template>
  <el-container style="position:absolute;right:25%;left:25%;width:50%;height: 100%;background-color:#ffffff;">
    <el-main>
      <el-container>
        <el-header
          height="50px"
          style="display: flex;justify-content:space-between;"
        >
          <div style="display: flex;flex-direction: row;">
            <img
              src="../assets/提问.png"
              style="width: 50px;height: 50px;"
            />
            <label style="font-size:35px;color:gray">提问</label>
          </div>
          <el-button
            type="text"
            @click="open1"
            style="font-size: 15px;color: #88B372;"
          >想上传图片？点这里！</el-button>
        </el-header>
        <el-main>
          <el-input
            type="textarea"
            placeholder="请将问题概述出标题"
            v-model="text.form.title"
            maxlength="50"
            show-word-limit
            style="font-size:26px"
          ></el-input>
          <el-input
            type="textarea"
            placeholder="请将问题详细描述"
            v-model="detailedcontent"
            style="margin-top:25px;font-size:20px;"
            :autosize="{ minRows: 12}"
          ></el-input>
          <el-input
            type="url"
            autocomplete="off"
            size="mini"
            v-model="url"
            style="width:300px;margin-top:25px;font-size:16px;"
          ><template slot="prepend">图片Url:</template></el-input>
          <el-select
            v-model="value"
            filterable
            allow-create
            size="small"
            default-first-option
            @change="getid"
            style="margin-left:18%;display:inline-block"
            placeholder="请选择题目所属科目"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.sectionName"
              :value="item.sid"
            >
            </el-option>
          </el-select>
          <!-- <el-select
            @change="getid"
            size="small"
            v-model="value"
            filterable
            placeholder="请选择上传问题所属科目"
            style="margin-left:100px;display:inline-block"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.sectionName"
              :value="item.sid"
            ></el-option>
          </el-select> -->
        </el-main>
        <el-footer align="center">
          <el-button
            type="primary"
            id="button"
            @click="uploadcheck"
            class="el-icon-upload el-icon--right"
            style="width:200px; margin-top:20px"
          > 上传</el-button>
        </el-footer>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "question",
  mounted(){
    this.$http.get("/api/section").then(res=>{
      this.options=res.data.sections
    })
  },
  data() {
    return {
      detailedcontent:"",
      url:"",
      list: [],
      numberValidateForm: {
        picture: ""
      },
      text: {
        form: {
          sectionId: null,
          title: "",
          content:"",
        }
      },
      value: "",
      img: [],
      options: [],
      createnewsection:{
        sectionName:""
      },
    };
  },
  methods: {
    uploadcheck(){
      try{
        if(this.text.form.sectionId===null)
          throw("请选择科目")
        if(this.text.form.title==="")
          throw("标题不能为空")
        if(parseFloat(this.text.form.sectionId).toString() === "NaN")//没有这个科目，先创建
          {
              this.createnewsection.sectionName=this.text.form.sectionId
              this.$http.post("/api/section",this.createnewsection).then((res)=>{
              this.$http.get("/api/section").then(res=>{
                    this.options=res.data.sections
                    this.options.forEach(element => {
                        if(element.sectionName==this.text.form.sectionId)
                          {
                            this.text.form.sectionId=element.sid;
                            console.log("kk"+this.text.form.sectionId)
                            this.upload()
                          }
                    });
                  })
            })
        }
        else{
          // console.log("zz"+this.text.form.sectionId)
          this.upload()
        }
        }catch(error){
        // console.log(error)
        this.$message({
          message: error,
          type: "error",
          duration: 3000
        });
      }
    },
    upload(){
            this.text.form.content=this.detailedcontent+"@#@"+this.url
            this.$http.post("/api/thread", this.text.form).then((response) => {
              // console.log(response.data);
              // console.log(response.status);
              if(response.status == 200) {
                this.$message({
                  message: "上传成功",
                  type: "success",
                  duration: 3000
                });
              }
              else {
                this.$message({
                  message: "上传失败",
                  type: "error",
                  duration: 3000
                });
              }
              setTimeout("window.location.reload()", 2000);
            })
            .catch(function (error) {
              if (error.response) {
                // 请求已发出，但服务器响应的状态码不在 2xx 范围内
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
              } else {
                // Something happened in setting up the request that triggered an Error
                console.log('Error', error.message);
              }
              console.log(error.config);
            })
    },
    open1() {
      this.$notify({
        title: "关于图片上传",
        dangerouslyUseHTMLString: true,
        message:
          '<strong>需要您先将图片上传至<a href="https://sm.ms/" target="_blank">https://sm.ms/</a>，然后将获得的图片url地址填入下面的图片Url框中</strong>'
      });
    },
    getid(item){
      // console.log("科目是"+item)
      this.text.form.sectionId=item
    }
  },
};
</script>

<style lang="less" scoped>
.upload-demo {
  margin-top: 30px;
  height: 200px;
  width: 690px;
}

.btn {
  position: absolute;
  transform: translate(300px, -80px);
}

.chooser {
  position: absolute;
  transform: translate(160%, -200px);
  width: 240px;
}

// .avatar-uploader .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
// .avatar-uploader .el-upload:hover {
//   border-color: #409eff;
// }
// .avatar-uploader-icon {
//   font-size: 28px;
//   color: #8c939d;
//   margin-top: 10%;
//   height: 60px;
//   width: 550px;
//   line-height: 178px;
//   text-align: center;
// }
// .avatar {
//   width: 1780px;
//   height: 1780px;
//   display: block;
// }
#button {
  width: 590px;
}
</style>
